#screen {
    width: 450px;
    height: 50px;
    margin-top: 10px;
    background-color: #fff;
    font-size: 22px;
    line-height: 50px;
    text-align: center;/* 水平方向的居中 */
}

#chat_area {
    width: 404px;
    height: 400px;
    margin-top: 10px;
    margin-left: 150px;
    border: 2px solid #fff; border-radius: 5px;
    position: relative;/* 采用相对定位，向元素的原始左侧位置增加 20 像素 */
    right:20px;
    background-color: #fff;
}
#chat_show {
    width: 400px;
    height: 300px; overflow-y: scroll;/* 当内容溢出元素的可见区域时，显示垂直滚动条并允许用户滚动查看内容 */
    background-color: #fec;
    font-size: 22px;
    line-height: 50px;
    text-align: center;/* 文本水平对齐方式为居中 */
}

#chat_input {
    width: 300px;
    height: 50px;
    margin-top: 30px;
    background-color: #fff;
    font-size: 30px;
    border: 2px solid #fec; border-radius: 5px;
    vertical-align: top;/* 文本垂直对齐方式为居顶 */
}

#chat_button {
    width: 90px;
    height: 50px;
    margin-top: 30px;
    background-color: #fec;
    font-size: 15px;
    border: 2px solid #fec; border-radius: 5px;/* 点击发送按钮为圆角 实线 */
    vertical-align: top;/* 文本垂直对齐方式为居顶 */
}
#chat_button:hover {
    width: 90px;
    height: 50px;
    margin-top: 30px;
    background-color: rgb(201, 145, 32);
    font-size: 15px;
    border: 2px solid #fec; border-radius: 5px;
    vertical-align: top;
}
#chat_button:active {
    width: 90px;
    height: 50px;
    margin-top: 30px;
    background-color: rgb(149, 127, 83);
    font-size: 15px;
    border: 2px solid #fec; border-radius: 5px;
    vertical-align: top;
}

#self_msg {
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    float: right;
    background-color: rgb(7, 190, 102);
    border-radius: 5px;
}
#peer_msg {
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    float: left;
    background-color: rgb(93, 218, 243);
    border-radius: 5px;
}

#return_button { /* id选择器，您需要在HTML中给按钮添加 id="return_button" 属性 */
    padding: 10px 20px; /* 按钮内边距 */
    font-size: 16px; /* 文本大小 */
    color: white; /* 文本颜色 */
    background-color: darksalmon; /* 背景色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时为指针形状 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 盒阴影效果增加立体感 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

#return_button:hover { /* 当鼠标悬停在按钮上时的样式 */
    background-color: #0056b3; /* 暗色背景 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 更大的阴影效果 */
}
